<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>立即预约</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../../css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../../css/app.css" />
		<link href="../../css/mobiscroll_002.css" rel="stylesheet" type="text/css">    <!--日期css-->
		<link href="../../css/mobiscroll.css" rel="stylesheet" type="text/css">			<!--日期css-->
		<link href="../../css/mobiscroll_003.css" rel="stylesheet" type="text/css">		<!--日期css-->
		<style>
			.w36 {
				width: 40% !important;
			}
			.mui-input-row .mui-btn{padding: 10px 0}
			.mb20 {
				margin-bottom: 0px!important;
			}
			.mui-btn-sz{margin-left:10%}
			.hairPieceInfor{display: none}   /*发件信息隐藏*/
			.receivingInfor{display: none}   /*收件信息隐藏*/
		</style>
		<script type="text/javascript" src="../../js/jquery-3.2.1.min.js"></script>
		<script src="../../js/mobiscroll_002.js" type="text/javascript"></script>      <!--选择起租日期的js-->
		<script src="../../js/mobiscroll_004.js" type="text/javascript"></script>		<!--选择起租日期的js-->
		<script src="../../js/mobiscroll.js" type="text/javascript"></script>				<!--选择起租日期的js-->
		<script src="../../js/mobiscroll_003.js" type="text/javascript"></script>		<!--选择起租日期的js-->
		<script src="../../js/mobiscroll_005.js" type="text/javascript"></script>		<!--选择起租日期的js-->
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">立即预约</h1>
		</header>
		<div class="mui-content">
			<form id='login-form' class="mui-input-group">
				<div class="mui-input-row h50">
					<i class="mui-yuyue-icon mui-wutype-icon  mui-pull-left"></i>
					<label class="pl40">选择存放物品类型</label>
					<select class="mui-btn mui-btn-block w36 mt5">
						<option value="item-1">请选择物品类型</option>
						<option value="item-2">item-2</option>
						<option value="item-3">item-3</option>
						<option value="item-4">item-4</option>
						<option value="item-5">item-5</option>
					</select>
				</div>
				<div class="mui-input-row h50">
					<i class="mui-yuyue-icon mui-cktype-icon  mui-pull-left"></i>
					<label class="pl40">选择仓库类型</label>
					<select class="mui-btn mui-btn-block w36 mt5">
						<option value="item-1">请选择仓库类型</option>
						<option value="item-2">item-2</option>
						<option value="item-3">item-3</option>
						<option value="item-4">item-4</option>
						<option value="item-5">item-5</option>
					</select>
					<!--<a class="mui-navigate-right"></a>	-->
				</div>
				<div class="mui-input-row h50">
					<i class="mui-yuyue-icon mui-time-icon  mui-pull-left"></i>
					<label class="pl40">选择起租日期</label>
					<input onfocus="this.blur();" type="text" id="appDate" style="width: 50%;text-align: right" class="mt5 mui-input-clear mui-input mui-yuuye" placeholder="选择起租日期">
				</div>
				<div class="mui-input-row h50">
					<i class="mui-yuyue-icon mui-time-icon  mui-pull-left"></i>
					<label class="pl40">选择起租日期</label>
					<input onfocus="this.blur();" type="text"  id="appDateTime" style="width: 50%;text-align: right" class="mt5 mui-input-clear mui-input mui-yuuye" placeholder="选择起租日期">
				</div>
				<div class="mui-input-row h50">
					<i class="mui-yuyue-icon mui-zq-icon  mui-pull-left"></i>
					<label class="pl40">租期</label>
					<input style="text-align: right" maxlength="10" pattern="[0-9]*" type="text" class="mt5 mui-input-clear mui-input mui-yuuye" placeholder="请输入租期">
				</div>
				<div class="mui-input-row h50">
					<i class="mui-yuyue-icon mui-mianji-icon  mui-pull-left"></i>
					<label class="pl40">面积</label>
					<!--<input id='' type="text" class="mt5 mui-input-clear mui-input mui-yuuye" placeholder="请输入租用面积">-->
					<input type="text" pattern="[0-9]*" maxlength="6" style="width: 28%;float: left;padding-right: 0;padding-left: 0;margin-left: 44px;text-align: center" class="houseLength mt5 mui-input-clear mui-input mui-yuuye" placeholder="请输入租用长">
					<span style="float: left;line-height:50px;color: #999999">—</span>
					<input type="text" pattern="[0-9]*" maxlength="6" style="width: 28%;float: left;padding-right: 0;padding-left: 0;text-align: center" class="houseWidth mt5 mui-input-clear mui-input mui-yuuye" placeholder="请输入租用宽">
				</div>
				<div class="mui-input-row h50">
					<i class="mui-yuyue-icon mui-jiazhi-icon  mui-pull-left"></i>
					<label class="pl40">声明价值</label>
					<select class="mui-btn mui-btn-block w36 mt5">
						<option value="item-1">请选择</option>
						<option value="item-2">item-2</option>
						<option value="item-3">item-3</option>
						<option value="item-4">item-4</option>
						<option value="item-5">item-5</option>
					</select>
					<!--<a class="mui-navigate-right"></a>	-->
				</div>
				<div class="mui-input-row h50">
					<i class="mui-yuyue-icon mui-number-icon  mui-pull-left"></i>
					<label class="pl40">包装数量</label>
					<input pattern="[0-9]*" style="text-align: right" maxlength="11"  type="text" class="mt5 mui-input-clear mui-input mui-yuuye" placeholder="请输入包装数量">
				</div>
				<div class="mui-input-row h50">
					<i class="mui-yuyue-icon mui-cftype-icon  mui-pull-left"></i>
					<label class="pl40">存放类型</label>
					<select class="mui-btn mui-btn-block w36 mt5 storageType">
						<option value="item-1">自存</option>
						<option value="item-2">上门取货</option>
					</select>
					<!--<a class="mui-navigate-right"></a>	-->
				</div>
			</form>
			<div class="mui-jfinfo hairPieceInfor">发件信息</div>
			<form  class="mui-input-group hairPieceInfor">
				<div class="mui-input-row h50">
					<i class="mui-yuyue-icon mui-peoples-icon  mui-pull-left"></i>
					<label class="pl40">发件人</label>
					<input id='' type="text" style="text-align: right" class="mt5 mui-input-clear mui-input mui-yuuye" placeholder="请输入发件人">
				</div>
				<div class="mui-input-row h50">
					<i class="mui-yuyue-icon mui-wutime-icon  mui-pull-left"></i>
					<label class="pl40">取件起始时间</label>
					<input onfocus="this.blur();" type="text"  id="startStartTime" style="width: 50%;text-align: right" class="mt5 mui-input-clear mui-input mui-yuuye" placeholder="选择起租日期">
					<!--<a class="mui-navigate-right"></a>	-->
				</div>
				<div class="mui-input-row h50">
					<i class="mui-yuyue-icon mui-wutime-icon  mui-pull-left"></i>
					<label class="pl40">取件结束时间</label>
					<input onfocus="this.blur();" type="text"  id="endtStartTime" style="width: 50%;text-align: right" class="mt5 mui-input-clear mui-input mui-yuuye" placeholder="选择起租日期">
					<!--<a class="mui-navigate-right"></a>	-->
				</div>
				<div class="mui-input-row h50">
					<i class="mui-yuyue-icon mui-wuphone-icon  mui-pull-left"></i>
					<label class="pl40">联系电话</label>
					<input style="text-align: right" maxlength="11" pattern="[0-9]*" type="text" class="mt5 mui-input-clear mui-input mui-yuuye" placeholder="请输入联系电话">
				</div>
				<div class="mui-input-row h50">
					<i class="mui-yuyue-icon mui-wuaddress-icon  mui-pull-left"></i>
					<label class="pl40">发件地区</label>
					<div style="width: 4rem;float: left;margin-left: 2rem">
						<select style="width: 100%;text-align: center;padding: 0;border: none" class="mui-btn mui-btn-block mt5">
							<option value="item-1">选择省</option>
							<option value="item-2">河北</option>
							<option value="item-3">吉林</option>
							<option value="item-4">湖北</option>
							<option value="item-5">北京</option>
						</select>
					</div>
					<div style="width:4rem;float: left;">
						<select style="width: 100%;text-align: center;padding: 0;border: none" class="mui-btn mui-btn-block mt5">
							<option value="item-1">选择市</option>
							<option value="item-2">廊坊</option>
							<option value="item-3">石家庄</option>
							<option value="item-4">保定</option>
							<option value="item-5">邯郸</option>
						</select>
					</div>
					<div style="width: 4rem;float: left;">
						<select style="width: 100%;text-align: center;padding: 0;border: none" class="mui-btn mui-btn-block mt5">
							<option value="item-1">选择区</option>
							<option value="item-2">区一</option>
							<option value="item-3">区一</option>
							<option value="item-4">区一</option>
							<option value="item-5">区一</option>
						</select>
					</div>
					<!--<a class="mui-navigate-right"></a>	-->
				</div>
				<div class="mui-input-row h50">
					<i class="mui-yuyue-icon mui-wuaddressinfo-icon  mui-pull-left"></i>
					<label class="pl40">详细地址</label>
					<input style="text-align: right"  type="text" class="mt5 mui-input-clear mui-input mui-yuuye" placeholder="请输入联系电话">
				</div>
				<div class="mui-input-row h50">
					<i class="mui-yuyue-icon mui-wutype-icon  mui-pull-left"></i>
					<label class="pl40">提取类型</label>
					<select class="mui-btn mui-btn-block w36 mt5 extractionType">
						<option value="item-1">自取</option>
						<option value="item-2">送货上门</option>
					</select>
					<!--<a class="mui-navigate-right"></a>	-->
				</div>
			</form>
			<div class="mui-jfinfo receivingInfor">收件信息</div>
			<form id='' class="mui-input-group receivingInfor">
				<div class="mui-input-row h50">
					<i class="mui-yuyue-icon mui-peoples-icon  mui-pull-left"></i>
					<label class="pl40">收件人</label>
					<input style="text-align: right"  type="text" class="mt5 mui-input-clear mui-input mui-yuuye" placeholder="请输入收件人">
				</div>
				<div class="mui-input-row h50">
					<i class="mui-yuyue-icon mui-wuphone-icon  mui-pull-left"></i>
					<label class="pl40">联系电话</label>
					<input style="text-align: right" maxlength="11"  type="text" class="mt5 mui-input-clear mui-input mui-yuuye" placeholder="请输入联系电话">
				</div>
				<div class="mui-input-row h50">
					<i class="mui-yuyue-icon mui-wuaddress-icon  mui-pull-left"></i>
					<label class="pl40">收件地区</label>
					<div style="width: 4rem;float: left;margin-left: 2rem">
						<select style="width: 100%;text-align: center;padding: 0;border: none" class="mui-btn mui-btn-block mt5">
							<option value="item-1">选择省</option>
							<option value="item-2">河北</option>
							<option value="item-3">吉林</option>
							<option value="item-4">湖北</option>
							<option value="item-5">北京</option>
						</select>
					</div>
					<div style="width:4rem;float: left;">
						<select style="width: 100%;text-align: center;padding: 0;border: none" class="mui-btn mui-btn-block mt5">
							<option value="item-1">选择市</option>
							<option value="item-2">廊坊</option>
							<option value="item-3">石家庄</option>
							<option value="item-4">保定</option>
							<option value="item-5">邯郸</option>
						</select>
					</div>
					<div style="width: 4rem;float: left;">
						<select style="width: 100%;text-align: center;padding: 0;border: none" class="mui-btn mui-btn-block mt5">
							<option value="item-1">选择区</option>
							<option value="item-2">区一</option>
							<option value="item-3">区一</option>
							<option value="item-4">区一</option>
							<option value="item-5">区一</option>
						</select>
					</div>
					<!--<a class="mui-navigate-right"></a>	-->
				</div>
				<div class="mui-input-row h50">
					<i class="mui-yuyue-icon mui-wuaddressinfo-icon  mui-pull-left"></i>
					<label class="pl40">详细地址</label>
					<input style="text-align: right" type="text" class="mt5 mui-input-clear mui-input mui-yuuye" placeholder="请输入联系电话">
				</div>
				<div class="mui-input-row h50">
					<i class="mui-yuyue-icon mui-wutime-icon  mui-pull-left"></i>
					<label class="pl40">起始派送时间</label>
					<input onfocus="this.blur();" type="text"  id="startDeliveryTime" style="width: 50%;text-align: right" class="mt5 mui-input-clear mui-input mui-yuuye" placeholder="选择派送时间">
					<!--<a class="mui-navigate-right"></a>	-->
				</div>
				<div class="mui-input-row h50">
					<i class="mui-yuyue-icon mui-wutime-icon  mui-pull-left"></i>
					<label class="pl40">结束派送时间</label>
					<input onfocus="this.blur();" type="text"  id="endtDeliveryTime" style="width: 50%;text-align: right" class="mt5 mui-input-clear mui-input mui-yuuye" placeholder="选择派送时间">
					<!--<a class="mui-navigate-right"></a>	-->
				</div>
			</form>
			<div class="mui-xieyi" style="margin-bottom: 6rem">
				<input name="checkbox" value="Item 2" type="checkbox" checked="">
				您已经确认<span>《百福云仓库用户注册协议》</span>
			</div>
			<div style="position: fixed;z-index: 1000;bottom: 2rem;left: 0;width: 100%">
				<button type="button" class="mb20 mui-btn-sz">确认下单</button>
			</div>
		</div>
	</body>
	<script>
		$(function(){
            var currYear = (new Date()).getFullYear();
            var opt={};
            opt.date = {preset : 'date'};
            opt.datetime = {preset : 'datetime'};
            opt.time = {preset : 'time'};
            opt.default = {
                theme: 'android-ics light', //皮肤样式
                display: 'modal', //显示方式
                mode: 'scroller', //日期选择模式
                dateFormat: 'yyyy-mm-dd',
                lang: 'zh',
                showNow: true,
                nowText: "今天",
                startYear: currYear - 10, //开始年份
                endYear: currYear + 10 //结束年份
            };

            $("#appDate").mobiscroll($.extend(opt['date'], opt['default']));  //选择起租日期，不带时分
            var optDateTime = $.extend(opt['datetime'], opt['default']);
            var optTime = $.extend(opt['time'], opt['default']);
            $("#appDateTime").mobiscroll(optDateTime).datetime(optDateTime);     //选择起租日期，带时分

            $("#startStartTime").mobiscroll(optDateTime).datetime(optDateTime);    //选择取件起始日期，带时分
            $("#endtStartTime").mobiscroll(optDateTime).datetime(optDateTime);    //选择取件起始日期，带时分

            $("#startDeliveryTime").mobiscroll(optDateTime).datetime(optDateTime);    //选择派送起始日期，带时分
            $("#endtDeliveryTime").mobiscroll(optDateTime).datetime(optDateTime);    //选择派送起始日期，带时分

            $(".storageType").change(function () {
                if($(".storageType").val() == "item-2"){
                    $(".hairPieceInfor").show();
                }else if($(".storageType").val() == "item-1"){
                    $(".hairPieceInfor").hide();
                    $(".receivingInfor").hide();
				}
            });
            $(".extractionType").change(function () {
                if($(".extractionType").val() == "item-2"){
                    $(".receivingInfor").show();
                }else if($(".extractionType").val() == "item-1"){
                    $(".receivingInfor").hide();
                }
            })

		})
	</script>
</html>